<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>06-watch监听属性</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="app">
            <h1>你认识 吴彦祖吗？ {{ isRecognize }}  </h1>
            <button @click="recognize = !recognize">你百度一下</button>
            <hr>

            <h1>姓名:{{user.uname}}</h1>
            <h1>年龄:{{user.age}}</h1>

            <button @click="user.uname ='李四'">改姓名</button>
            <button @click="user.age = 30">改年龄</button>
            <button @click="user = 12234 ">改对象</button>
        
        </div>
    </body>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false

        let vm = new Vue({
            el: "#app",
            data:{
                recognize:false,
            },
            computed:{  //计算属性
                isRecognize(){
                    return this.recognize ? "认识" : "不认识"
                }
            },
            // watch:{   //监听属性  监视属性
            //     recognize:{
            //         handler(newValue,oldValue){
            //             console.log(newValue,oldValue);
            //             newValue === false ? alert("那就百度吧") : alert("哦哦")
            //         }
            //     }
            // }
            user:{
                deep: true
            }
        })

        vm.$watch("recognize",{
            handler(newValue,oldValue){
                newValue === false ? console.log("百度") : console.log("ok");;
            }
        })
        
    </script>
</html>